<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { spaceCategoryAnalyzeUsingPost } from '@/api/analyzeController.ts'
import { message } from 'ant-design-vue'
import VChart from 'vue-echarts'
import 'echarts'

//存储响应结果
const spaceCategoryAnalyzeResponse = ref<API.SpaceCategoryAnalyzeResponse[]>([])

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

async function spaceCategoryAnalyze() {
  const resp = await spaceCategoryAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
  })
  if (resp.data.code === 0 && resp.data.data) {
    spaceCategoryAnalyzeResponse.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

const options = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['图片数量', '图片总大小'], // 图例名称，对应 series 的 name
    },
    yAxis: [
      {
        type: 'value',
        name: '图片数量',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        name: '图片总大小 (MB)',
        position: 'right',
        axisLabel: {
          formatter: '{value} MB',
        },
      },
    ],
    xAxis: {
      type: 'category',
      data: spaceCategoryAnalyzeResponse.value.map((item) => item.category), // 从数据中提取分类作为 y 轴类别
    },
    series: [
      {
        name: '图片数量',
        type: 'bar',
        yAxisIndex: 0, // 使用左侧 y 轴
        data: spaceCategoryAnalyzeResponse.value.map((item) => item.count), // 图片数量数据
      },
      {
        name: '图片总大小',
        type: 'bar',
        yAxisIndex: 1, // 使用右侧 y 轴
        data: spaceCategoryAnalyzeResponse.value.map((item) => item.totalSize), // 图片总大小数据
      },
    ],
  }
})

watchEffect(() => {
  spaceCategoryAnalyze()
})
</script>

<template>
  <!--  空间图片分类分析，echarts的分组条形图-->
  <div id="spaceCategoryAnalyze">
    <a-card style="height: 320px" title="空间图片分类分析">
      <v-chart :option="options" style="height: 300px" />
    </a-card>
  </div>
</template>

<style scoped></style>
